
import React, { Component } from 'react'
import { nanoid } from 'nanoid'

import '../../assets/todo.css'

import Header from "./Header";
import List from './List'
import Footer from './Footer'

class Todo extends Component {

    state = {

        todos: [

            // { id: nanoid(), name: "吃饭", status: 0 },

            // { id: nanoid(), name: "睡觉", status: 0 },

            // { id: nanoid(), name: "看书", status: 0 },

        ],

        finished: 0

    }

    //增加操作，在组件中以props的形式传递给子组件

    Addtodo = (newtodo) => {

        //旧的todos

        const Oldtodos = this.state.todos

        //生成一个新的todolist

        const Newtodos = [newtodo, ...Oldtodos]

        //setState

        this.setState({ todos: Newtodos })

    }

    //删除操作，在组件中以props的形式传递给子组件

    Deletetodo = (id) => {

        //旧的todolist

        const Oldtodos = this.state.todos

        //使用旧的todolist组成一个新的数组

        const Newtodos = Oldtodos.filter(

            (todo) => {

                return todo.id !== id

            }

        )

        //setState

        this.setState({ todos: Newtodos })

    }

    //更新完成的任务，在组件中以props的形式传递给子组件

    updateFinished(todoItem) {

        let sum = 0;

        const Oldtodos = this.state.todos

        Oldtodos.forEach(item => {

            if(item.id === todoItem.id) {

                item.status = todoItem.status

            }

        })

        console.log(Oldtodos)

        Oldtodos.forEach(

            (item) => {

                if (item.id === todoItem.id) {

                    item.status = todoItem.status;

                }

                if (item.status === 1) {

                    sum = sum + 1;

                }

            }

        );

        this.setState({ todos: Oldtodos });

    }

    //更新任务的总数，在组件中以props的形式传递给子组件

    updateAll(todoItem) {

        let obj = [], sum = 0;

        const Oldtodos = this.state.todos

        Oldtodos.forEach(

            item => {

                if (item.id === todoItem.id) {

                    obj.push(item);

                    if (item.status === 1) {

                        sum = sum + 1;

                    }

                }

            }

        );

        this.setState({ list: obj, finished: sum });

    }

    CheckTodoAll = list => {

        this.setState({

            todos: list

        })

        setTimeout(() => {

            console.log(this.state.todos)

        },500)

    }

    //清除已完成的内容

    DeletetodoAll = () => {

        const {todos} =this.state

        const nofinishedArr = todos.filter(item => {

            return item.status === 0

        })

        console.log(nofinishedArr)

        this.setState({ todos: nofinishedArr })

    }

    render() {

        // console.log("App")

        // console.log(this)

        const { todos } = this.state

        return (

            <div className="todo-container">
                <h1 className='todo-title'> TodoList</h1>

                <div className="todo-wrap">

                    <Header Addtodo={this.Addtodo} />

                    <List todos={todos} Deletetodo={this.Deletetodo} finishedChange={this.updateFinished.bind(this)} />

                    <Footer todos={todos} CheckTodoAll={this.CheckTodoAll} DeletetodoAll={this.DeletetodoAll}/>

                </div>

            </div>

        )

    }

}

export default Todo
